<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>jQuery+HTML5响应式手机端瀑布流布局特效</title>
    <link rel="stylesheet" type="text/css" href="/resources/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/resources/css/style.css"/>
    <script src="/resources/js/jquery-1.8.3.min.js" type="text/javascript"></script>

</head>
<body>

<div class="wrapper">
    <ul class="wall">
        <li class="article">
            <a href="#">
                <img src="/resources/images/7.jpg"/>
                <p>用户名用户名用户名用户名用户名</p>
                <small>10000000票</small>
                <input type="button" value="投票"/>
            </a>
        </li>
        <li class="article">
            <a href="#">
                <img src="/resources/images/12.jpg"/>
                <p>用户名用户名用户名用户名</p>
                <small>10000000票</small>
                <input type="button" value="投票"/>
            </a>
        </li>
        <li class="article">
            <a href="#">
                <img src="/resources/images/4.jpg"/>
                <p>用户名用户名用户名用户名用户名</p>
                <small>10000000票</small>
                <input type="button" value="投票"/>
            </a>
        </li>
        <li class="article">
            <a href="#">
                <img src="/resources/images/6.jpg"/>
                <p>用户名用户名用户名用户名用户名</p>
                <small>10000000票</small>
                <input type="button" value="投票"/>
            </a>
        </li>
    </ul>
</div>

<script src="/resources/js/jaliswall.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('.wall').jaliswall({item: '.article'});
    });
</script>

</body>
</html>